<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">活动</el-breadcrumb-item>
			<el-breadcrumb-item>角色管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<div slot="header">
				<el-button type="primary" @click="addDepartment">添加部门</el-button>
			</div>
			<!-- 表格数据 -->
			<el-table :data="tableData" border>
				<el-table-column sortable label="角色名称" prop="NAME" align="center"></el-table-column>
				<el-table-column sortable label="职能描述" align="center">
					<template>
						<span>暂无描述</span>
					</template>
				</el-table-column>
				<el-table-column sortable label="成员数量" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="byName(scope.row.NAME)">{{scope.row.countName}}</el-button>
					</template>
				</el-table-column>
				<el-table-column sortable label="添加时间" prop="create_time" align="center"></el-table-column>
				<el-table-column label="是否启用" align="center">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							active-color="#13ce66"
							inactive-color="#ff4949"
							active-value="1"
							inactive-value="0"
							@change="statusChange(scope.row)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="Authority(scope.row)">权限设置</el-button>
						<el-button type="text" @click="roleEdit(scope.row)">编辑</el-button>
						<el-button type="text" @click="deleteIdRole(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page"
				:page-sizes="[5,10,15,20]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="this.total"
			></el-pagination>
		</el-card>
		<el-dialog title="权限管理" :visible.sync="dialogVisible" width="50%" @close="setRightDialogClosed">
			<!-- 树形结构 -->
			<el-tree
				:data="data"
				show-checkbox
				node-key="id"
				:props="defaultProps"
				:default-expand-all="true"
				highlight-current
				ref="tree"
			></el-tree>
			<!-- 表单数据结束 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible=false;defKeys=[]">取 消</el-button>
				<el-button type="primary" @click="commit()">保 存</el-button>
			</span>
		</el-dialog>
		<el-dialog title="添加部门" :visible.sync="departmentDialogVisible" width="50%">
			<!-- form表单 -->
			<el-form label-width="70px" status-icon :rules="rules" :model="roleForm" ref="roleRef">
				<el-form-item label="部门名称" label-width="100" prop="name">
					<el-input v-model="roleForm.name" style="width:300px"></el-input>
				</el-form-item>
				<!-- <el-form-item label="职能描述" label-width="120" prop="dec">
					<el-input type="textarea" v-model="roleForm.dec"></el-input>
				</el-form-item>-->
				<el-form-item label="是否开启" prop="status" label-width="100">
					<el-switch
						v-model="roleForm.status"
						active-color="#13ce66"
						inactive-color="#ff4949"
						active-value="1"
						inactive-value="0"
					></el-switch>
				</el-form-item>
			</el-form>
			<!-- 表单数据结束 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="departmentDialogVisible=false">取 消</el-button>
				<el-button type="primary" @click="commitDepartment()">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [],
			page: 1,
			size: 10,
			total: 0,
			data: [],
			defaultProps: {
				children: "children",
				label: "label",
			},
			dialogVisible: false,
			myIdResource: [],
			//当前角色拥有的权限
			defKeys: [],

			roleRows: {},

			addIds: [],
			departmentDialogVisible: false,
			roleForm: {},
			rules: {},
		}
	},
	methods: {
		// 获取所有角色
		async getRole() {
			const { data: res } = await this.$http.get(
				`system/role/queryByRole?page=${this.page}&size=${this.size}`
			)
			if (res.code == 200) {
				this.$message.success("查询成功")
				this.tableData = res.data.rows
			}
		},
		//获取所有权限列表
		async getResource() {
			const { data: res } = await this.$http.get(
				`system/resource/findAllResource`
			)
			if (res.code == 200) {
				this.$message.success("获取权限列表成功")
				this.data = res.data
			}
		},
		handleSizeChange(val) {},

		handleCurrentChange(val) {},

		statusChange(status) {
			console.log(status)
		},
		async roleEdit(row) {
			const { data: res } = await this.$http.get(
				`system/role/findById?id=${row.id}`
			)
			if(res.code!==200){
			return	this.$message.error("查询失败")
			}
            
		},

		async deleteIdRole(row) {
			const confirmResult = await this.$confirm(
				"此操作将永久删除权限不可逆,是否继续",
				"提示",
				{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
				}
			).catch((err) => err)
			console.log(confirmResult)
			if (confirmResult !== "confirm") {
				return this.$message.info("取消删除")
			}
			const { data: res } = await this.$http.post(
				`system/member/deleteIdRole?id=${row.id}`
			)
			if (res.code == 200) {
				this.$message.success("删除成功")
				this.getRole()
				return
			}
			this.$message.error("删除失败")
		},

		byName(name) {
			this.$router.push({
				path: "member_management",
				query: {
					code: name,
				},
			})
		},
		async Authority(rows) {
			const { data: res } = await this.$http.get(
				`system/resource/findByidResource?id=${rows.id}`
			)
			this.myIdResource = res.data

			for (let i = 0; i < this.myIdResource.length; i++) {
				this.defKeys.push(this.myIdResource[i].resource_id)
			}
			// const keys=[...this.defKeys]
			this.roleRows = rows
			this.dialogVisible = true
			this.$nextTick(()=>{
				this.$refs.tree.setCheckedKeys(this.defKeys)
			}) 
			
		},
		async commit() {
			this.dialogVisible = false
			const keys = [...this.$refs.tree.getCheckedKeys()]
			console.log(keys)
			const idStr = keys.join(",")
			console.log(idStr)
			const {
				data: res,
			} = await this.$http.post(
				`system/role/addRules?roleId=${this.roleRows.id}`,
				{ ids: idStr }
			)
			if (res.code == 200) {
				this.$message = success("修改成功")
			}
			// console.log(ids)
		},
		cancel() {
			console.log(this.Ids)
			this.dialogVisible = false
			this.$refs.tree.setCheckedKeys([])
		},
		//关闭权限列表时清空
		setRightDialogClosed() {
			this.defKeys = []
		},
		//打开添加部门的对话框
		addDepartment() {
			this.departmentDialogVisible = true
		},
		//提交添加部门的信息
		async commitDepartment() {
			for (let i = 0; i < this.tableData.length; i++) {
				if (this.roleForm.name === this.tableData[i].NAME) {
					return alert("已有该部门,请重新输入")
				}
			}
			const { data: res } = await this.$http.post(
				`system/role/add`,
				this.roleForm
			)
			if (res.code == 200) {
				this.$message.success("提交成功")
			}
			this.getRole()
			this.roleForm = {}
			this.departmentDialogVisible = false
		}
	},
	created() {
		this.getRole()
		this.getResource()
		
	},
}
</script>

<style>
</style>